<template>
	<!-- 兴趣爱好 -->
	<Top-Page>
		<cu-custom bgColor="bg-gradual-white-3" :isBack="true">
			<template #content>兴趣爱好</template>
		</cu-custom>

<!-- 		<Field
			rightIcon
			disabled
			autosize
			label="技能"
			placeholder="去填写"
			v-model="userInfo.good_at"
			@click.stop="toSetValue('good_at', '您的技能事项', `&text=${userInfo.good_at || ''}`)"
		/> -->

	<!-- 	<Field
			rightIcon
			disabled
			autosize
			label="特长专长"
			placeholder="去填写"
			v-model="userInfo.speciality"
			@click.stop="toSetValue('speciality', '特长专长', `&text=${userInfo.speciality || ''}`)"
		/> -->

		<view class="cell-multiseriate border-bottom-before" @click="skillsLearnedShow = !skillsLearnedShow">
			<view class="cell-multiseriate__title">
				技能与特长
				<text class="arrow-right arrow__small cell-right__icon"></text>
			</view>
			<view class="cell-multiseriate__content">
				<template v-for="item in disposeWord(userInfo.skills_learned)" :key="item">
					<view class="content-item">
						{{ item }}
					</view>
				</template>
			</view>
		</view>

		<view class="cell-multiseriate border-bottom-before" @click="favoriteBrandShow = !favoriteBrandShow">
			<view class="cell-multiseriate__title">
				喜欢的品牌
				<text class="arrow-right arrow__small cell-right__icon"></text>
			</view>
			<view class="cell-multiseriate__content">
				<template v-for="item in disposeWord(userInfo.favorite_brand)" :key="item">
					<view class="content-item">
						{{ item }}
					</view>
				</template>
			</view>
		</view>

		<view class="cell-multiseriate border-bottom-before" @click="hobbyShow = !hobbyShow">
			<view class="cell-multiseriate__title">
				爱好
				<text class="arrow-right arrow__small cell-right__icon"></text>
			</view>
			<view class="cell-multiseriate__content">
				<template v-for="item in disposeWord(userInfo.hobby)" :key="item">
					<view class="content-item">
						{{ item }}
					</view>
				</template>
			</view>
		</view>

		<!-- 技能与特长 -->
		<Popup v-model:show="skillsLearnedShow" position="bottom" round closeable class="interests-popup-wrap">
			<view class="title">技能与特长</view>

			<view class="select-content">
				<view
					v-for="item in skillsLearnedList"
					:class="['label-li', { on: item.check }]"
					@click="item.check = !item.check"
				>
					{{ item.title }}
				</view>
			</view>

			<view class="add-label">
				<input
					class="add-item"
					v-for="(item, index) in addSkillsLearnedLabel"
					:maxlength="6"
					auto-height
					:value="item.value"
					@input="updateInput('addSkillsLearnedLabel', index, $event)"
					placeholder="去填写"
					placeholder-style="color:#fff"
				/>
			</view>

			<view class="add-wrap" @click="addLabel('addSkillsLearnedLabel')" v-show="addSkillsLearnedLabel.length < 10">
				<view class="add-fh">+</view>
				<view>追加您学过的技能</view>
			</view>

			<view class="btn-wrap">
				<view class="btn-ca btn-cancel" @click="skillsLearnedShow = false">取消</view>
				<view
					class="btn-ca btn-affirm"
					@click="confirm('skillsLearnedList', 'addSkillsLearnedLabel', 'skills_learned')"
				>
					确认
				</view>
			</view>
		</Popup>

		<!-- 喜欢的品牌 -->
		<Popup v-model:show="favoriteBrandShow" position="bottom" round closeable class="interests-popup-wrap">
			<view class="title">喜欢的品牌</view>

			<view class="select-content">
				<view
					v-for="item in favoriteBrandList"
					:class="['label-li', { on: item.check }]"
					@click="item.check = !item.check"
				>
					{{ item.title }}
				</view>
			</view>

			<view class="add-label">
				<input
					class="add-item"
					v-for="(item, index) in addFavoriteLabel"
					:maxlength="4"
					auto-height
					:value="item.value"
					@input="updateInput('addFavoriteLabel', index, $event)"
					placeholder="去填写"
					placeholder-style="color:#fff"
				/>
			</view>

			<view class="add-wrap" @click="addLabel('addFavoriteLabel')" v-show="addFavoriteLabel.length < 10">
				<view class="add-fh">+</view>
				<view>追加您喜欢的品牌</view>
			</view>

			<view class="btn-wrap">
				<view class="btn-ca btn-cancel" @click="favoriteBrandShow = false">取消</view>
				<view class="btn-ca btn-affirm" @click="confirm('favoriteBrandList', 'addFavoriteLabel', 'favorite_brand')">
					确认
				</view>
			</view>
		</Popup>

		<!-- 爱好 -->
		<Popup v-model:show="hobbyShow" position="bottom" round closeable class="interests-popup-wrap">
			<view class="title">爱好</view>

			<view class="select-content">
				<view
					v-for="(item, index) in labelList"
					:class="['label-li', labelON(index) ? 'on' : '']"
					@click="changeLabel(index)"
				>
					{{ item }}
				</view>
			</view>
			<view class="add-label">
				<input
					class="add-item"
					v-for="(item, index) in addHobbyLabel"
					:maxlength="4"
					auto-height
					:value="item.value"
					@input="updateInput('addHobbyLabel', index, $event)"
					placeholder="去填写"
					placeholder-style="color:#fff"
				/>
			</view>

			<view class="add-wrap" @click="addLabel('addHobbyLabel')" v-show="addHobbyLabel.length < 10">
				<view class="add-fh">+</view>
				<view>追加您的爱好</view>
			</view>

			<view class="btn-wrap">
				<view class="btn-ca btn-cancel" @click="hobbyShow = false">取消</view>
				<view class="btn-ca btn-affirm" @click="hobbyConfirm">确认</view>
			</view>
		</Popup>
	</Top-Page>
</template>

<script>
import Cell from "@/components/Cell/Cell.vue"
import Popup from "@/components/Popup/Popup.vue"

import { saveInfo } from "@/hooks/useSaveChanges"

import { mixins } from "./mixin/index"
export default {
	mixins: [mixins],
	data() {
		return {
			saveInfo,
			skillsLearnedShow: false,
			skillsLearnedList: [
				{
					title: "专业知识",
					check: false,
					id: 0,
				},
				{
					title: "技术技能",
					check: false,
					id: 1,
				},
				{
					title: "沟通能力",
					check: false,
					id: 2,
				},
				{
					title: "团队合作",
					check: false,
					id: 3,
				},
				{
					title: "解决问题能力",
					check: false,
					id: 4,
				},
				{
					title: "创新能力",
					check: false,
					id: 5,
				},
				{
					title: "领导能力",
					check: false,
					id: 6,
				},
				{
					title: "适应能力",
					check: false,
					id: 7,
				},
				{
					title: "时间管理",
					check: false,
					id: 8,
				},
				{
					title: "专业道德",
					check: false,
					id: 9,
				},
			],
			favoriteBrandShow: false,
			favoriteBrandList: [
				{
					title: "香奈儿",
					check: false,
					id: 0,
				},
				{
					title: "路易威登",
					check: false,
					id: 1,
				},
				{
					title: "圣罗兰",
					check: false,
					id: 2,
				},
				{
					title: "古驰",
					check: false,
					id: 3,
				},

				{
					title: "慧驰",
					check: false,
					id: 4,
				},
				{
					title: "卡地亚",
					check: false,
					id: 5,
				},
				{
					title: "阿玛尼",
					check: false,
					id: 6,
				},
				{
					title: "欧米茄",
					check: false,
					id: 7,
				},
				{
					title: "范思哲",
					check: false,
					id: 8,
				},
				{
					title: "爱马仕",
					check: false,
					id: 9,
				},
				{
					title: "浪琴",
					check: false,
					id: 10,
				},
			],
			hobbyShow: false,
			labelList: [],
			labelListIndex: [],
			addHobbyLabel: [], // 追加 -- 爱好
			addSkillsLearnedLabel: [], //追加 -- 学过的技能
			addFavoriteLabel: [], // 追加 -- 喜欢的品牌
		}
	},
	components: { Cell, Popup },
	onLoad() {
		this.labelList = JSON.parse(JSON.stringify(uni.getStorageSync("hobby_list") ?? "[]"))
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			//学过的技能
			const skillTitles = this.userInfo.skills_learned.split("-")
			skillTitles.forEach((skill) => {
				const matchedItem = this.skillsLearnedList.find((item) => item.title === skill)
				if (matchedItem) {
					matchedItem.check = true
				} else {
					this.addSkillsLearnedLabel.push({ value: skill })
				}
			})

			//喜欢的品牌
			const favoriteBrandTitle = this.userInfo.favorite_brand.split("-")
			favoriteBrandTitle.forEach((skill) => {
				const matchedItem = this.favoriteBrandList.find((item) => item.title === skill)
				if (matchedItem) {
					matchedItem.check = true
				} else {
					this.addFavoriteLabel.push({ value: skill })
				}
			})

			//爱好 -- 选择预设
			this.labelList.forEach((item, index) => {
				if (this.userInfo.hobby.indexOf(item) != -1) {
					this.labelListIndex.push(index)
				}
			})

			//爱好 -- 反显追加
			this.disposeWord(this.userInfo.hobby).forEach((item) => {
				!this.labelList.includes(item) && this.addHobbyLabel.push({ value: item })
			})
		},
		disposeWord(str) {
			return str ? str.split("-") : []
		},
		//设置/修改 内容
		toSetValue(type, text, extra) {
			uni.navigateTo({
				url: `/pages/rest/modify/modify?type=${type}&title=${text}${extra || ""}`,
			})
		},
		confirm(list, label, key) {
			let adds = []
			this[label].forEach((item) => {
				item.value.replace(/\s/g, "") != "" && adds.push(item.value)
			})
			adds = adds.join("-")

			let s = ""
			this[list].forEach((item) => {
				s += item.check ? `${item.title}-` : ""
			})

			if (s.endsWith("-")) {
				s = s.slice(0, -1) // 去掉最后一个字符
			}

			if (s) {
				adds && (s += `-${adds}`)
			} else {
				s = adds
			}

			this.saveInfo({ [key]: s })
			this.userInfo[key] = s
			this.skillsLearnedShow = false
			this.favoriteBrandShow = false
		},
		//爱好 -- 确定
		hobbyConfirm() {
			let adds = this.addHobbyLabel.map((item) => item.value)
			console.log(adds, "adds")
			const notEmptyList = []
			adds.forEach((v) => {
				if (v.replace(/\s/g, "") != "") {
					notEmptyList.push(v)
				}
			})
			adds = notEmptyList.join("-")
			console.log(notEmptyList, "notEmptyList")
			let s = ""
			this.labelList.forEach((item, index) => {
				s += this.labelListIndex.includes(index) ? `${item}-` : ""
			})

			if (s.endsWith("-")) {
				s = s.slice(0, -1) // 去掉最后一个字符
			}

			if (s) {
				adds && (s += `-${adds}`)
			} else {
				s = adds
			}

			this.saveInfo({ hobby: s })
			this.userInfo.hobby = s

			this.hobbyShow = false
		},
		changeLabel(index) {
			const ind = this.labelListIndex.indexOf(index)
			if (ind == -1) {
				this.labelListIndex.push(index)
			} else {
				this.labelListIndex.splice(ind, 1)
			}
		},
		labelON(index) {
			let s = false
			if (this.labelListIndex.includes(index)) {
				s = true
			} else {
				s = false
			}
			return s
		},
		updateInput(type, index, event) {
			const value = event.detail.value
			this.$set(this[type], index, { value })
		},
		//追加标签
		addLabel(type) {
			this[type].push({ value: "" })
		},
	},
}
</script>

<style lang="scss" scoped>
@import url("./index.scss");
.cell-multiseriate {
	padding: 30rpx 40rpx;
	width: 100%;
	position: relative;
	display: flex;
	background-color: #fff;
	flex-direction: column;

	.cell-multiseriate__title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.cell-multiseriate__content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;

		.content-item {
			color: #6a6a6a;
			padding: 12rpx 24rpx;
			margin: 12rpx 12rpx 0 0;
			border-radius: 8rpx;
			line-height: 1;
			border: 1px solid #6a6a6a;
		}
	}
}

:deep(.interests-popup-wrap) {
	width: 750rpx;
	padding: 40rpx 20rpx;

	.title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.select-content {
		margin-top: 60rpx;
		display: flex;
		flex-wrap: wrap;

		.label-li {
			padding: 12rpx 24rpx;
			line-height: 1;
			border: 1rpx solid #999;
			border-radius: 8rpx;
			margin: 12rpx 12rpx 0 0;
		}

		.on {
			background-color: #ccc;
			color: #fff;
			border-color: #ccc;
			// border-color: var(--subject_color);
		}
	}

	.add-label {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.add-item {
			width: 6em;
			padding: 12rpx 0;
			text-align: center;
			line-height: 1;
			border: 1rpx solid var(--subject_color);
			border-radius: 8rpx;
			margin: 6rpx 12rpx 6rpx 0;
			background-color: var(--subject_color);
			color: #fff;

			.uni-input-placeholder {
				color: rgba(255, 255, 255, 0.7) !important;
			}
		}
	}

	.add-wrap {
		margin-top: 20rpx;
		display: flex;
		align-items: center;

		.add-fh {
			margin-right: 14rpx;
			width: 48rpx;
			height: 48rpx;
			display: flex;
			line-height: 1;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			background-color: #eaeaea;
			color: #909090;
		}
	}

	.btn-wrap {
		display: flex;
		margin-top: 100rpx;
		justify-content: space-around;

		.btn-ca {
			line-height: 1;
			padding: 20rpx 60rpx;
			border-radius: 12rpx;
		}

		.btn-cancel {
			background-color: #ddd;
		}

		.btn-affirm {
			background-color: var(--subject_color);
			color: #fff;
		}
	}
}
</style>
